import { FC, useEffect } from "react";
import { IconFont } from "../../../utils/iconfont/icon";
import styles from "./Header.module.css";
import { useDispatch } from "react-redux";
// import { Input } from "antd";
// import { SearchOutlined } from "@ant-design/icons";
import { userSlice } from "../../../redux/login/slice";
import { useSelector } from "../../../redux/hooks";
import { getUserDetail, getPlaylist } from "../../../redux/userInfo/slice";
import { useHistory } from "react-router";
const Header: FC = () => {
  const dispatch = useDispatch();
  const mmmm = '{"name":"xskow", "age":23}';
  const history = useHistory();
  const userData = useSelector((s) => s.user);
  const { data } = useSelector((s) => s.user);
  useEffect(() => {
    if (localStorage.getItem("data") && localStorage.getItem !== null) {
      dispatch(userSlice.actions.isLogin(true));
      dispatch(userSlice.actions.changeData(localStorage.getItem("data")));
    }
  }, [dispatch]);
  const goLogin = () => {
    history.push("/login");
  };
  const goUser = () => {
    console.log(data["userId"]);
    dispatch(getPlaylist({ id: data["userId"] }));
    dispatch(getUserDetail({ id: data["userId"] }));
    history.push("/home/user");
  };
  // if(localStorage.getItem("data")){

  // }
  const useProfile = localStorage.getItem("data");
  return (
    <div className={styles.bg}>
      <div
        onClick={() => {
          dispatch(userSlice.actions.showLogin(true));
          console.log(userData);
        }}
      ></div>
      <div className={styles.header_left}>
        <div
          onClick={() => {
            console.log(useProfile);
          }}
        >
          <IconFont className={styles.wangyiyun} type="icon-wangyiyunyinle-" />
        </div>
        <IconFont className={styles.sousuo} type="icon-sousuo" />
        <div className={styles.search}>
          <input
            style={{ background: "rgb(225, 62, 62)" }}
            className={styles.searchInput}
            placeholder="搜索"
            type="text"
          />
        </div>
      </div>
      <div className={styles.header_right}>
        <div className={styles.login}>
          <div className={styles.login_left}>
            {useProfile && useProfile !== "undefined" ? (
              <>
                <div onClick={goUser} className={styles.touxiang}>
                  {/* <img src={JSON.parse(useProfile).avatarUrl} alt="" /> */}
                </div>
              </>
            ) : (
              <>
                {" "}
                <IconFont
                  className={styles.weidenglutouxiang}
                  type="icon-weidenglutouxiang"
                />
              </>
            )}

            {useProfile && useProfile !== "undefined" ? (
              <span onClick={goUser} className={styles.font}>
                {/* {JSON.parse(useProfile).nickname} */}22
              </span>
            ) : (
              <span onClick={goLogin} className={styles.font}>
                未登录
              </span>
            )}
            {/* <span onClick={goLogin} className={styles.font}>
              未登录
            </span>
            <span onClick={goLogin} className={styles.font}>
              已登录
            </span> */}
          </div>
          <div className={styles.rightIcons}>
            <IconFont
              className={styles.right}
              type="icon-pifugexinghuazhuti-xianxing"
            />{" "}
            <IconFont className={styles.right} type="icon-shezhi" />{" "}
            <IconFont className={styles.right} type="icon-duanxin" />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Header;
